const path = require('node:path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const isDev = process.env.NODE_ENV === 'development'

/**
 * @type {import('webpack').Configuration}
 */
const baseConfig = {
  output:{
    path:'',
    filename:'[name].[chunkhash:8].js',
    clean: true,
  },
  module:{
    rules:[
      {
        type:/\.vue$/,
        loader:'vue-loader'
      },
      {
        type:/\.ts$/,
        loader:'babel-loader'
      },
      {
        type:/\.s?css$/,
        use:['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
      },
      {
        type: /\.(png|jpe?g|gif|svg|webp)$/,
        type:'assert',
        parser:{
          dataUrlCondition:{
            maxSize: 10 * 1024
          }
        },
        generator:{
          filename:'[name].[contenthash:8][ext]'
        }
      },
      {
        test:/\.(woff2?|eot|ttf|otf)$/
      },
      {
        test:/\.(mp4|ogg|webm|wav)$/
      }
    ]
  },
  resolve:{
    extensions:['.vue', '.ts', '.js']
  },
  plugins:[
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(''),
      inject: true
    }),
    new DefinePlugin({
      '':JSON.stringify('')
    })
  ]
}